<template>
  <div>
    <el-divider>项目基本信息</el-divider>
    <el-form-item>
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="6">
          <el-form-item label="项目类型" label-width="100px" prop="reportType">
            <el-select v-model="reportCommonObj.reportType" style="width: 100%">
              <el-option v-for="item in projectType" :key="item.id" :value="item.id" :label="item.reportType" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目名称" label-width="100px" prop="reportName">
            <el-input v-model="reportCommonObj.reportName" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目编号" prop="reportId">
            <el-input v-model="reportCommonObj.reportId" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="开始/结束时间" label-width="120px" prop="startAndEndTime">
            <el-date-picker
              v-model="reportCommonObj.startAndEndTime"
              value-format="timestamp"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="startAndEndTimeChangeHandler"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="6">
          <el-form-item label="项目成果">
            <el-select v-model="reportCommonObj.achievement" placeholder="请选择" multiple style="width: 100%">
              <el-option v-for="item in achievement" :key="item.id" :value="item.id" :label="item.achievementName" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="业务员" prop="salesman">
            <el-select v-model="reportCommonObj.salesman" style="width: 100%" clearable filterable @change="selectUser" @clear="resetUser">
              <el-option v-for="item in noPageReportUserList" :key="item.id" :value="item.id" :label="item.nickName" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="部门" prop="department">
            <el-select v-model="reportCommonObj.department" style="width: 100%">
              <el-option
                v-for="item in departments"
                :key="item.value1"
                :label="item.label1"
                :value="item.value1"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="组别" label-width="90px">
            <el-select v-model="reportCommonObj.tranches" style="width: 100%">
              <el-option
                v-for="item in tranchess"
                :key="item.value2"
                :label="item.label2"
                :value="item.value2"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!--        <el-col :span="6">-->
        <!--          <el-form-item label="归属部门" prop="affiliation">-->
        <!--            <el-select v-model="reportCommonObj.affiliation" style="width: 100%">-->
        <!--              <el-option-->
        <!--                v-for="item in departments"-->
        <!--                :key="item.value1"-->
        <!--                :label="item.label1"-->
        <!--                :value="item.value1"-->
        <!--              />-->
        <!--            </el-select>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->

      </el-row>
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="6">
          <el-form-item label="项目收费" label-width="100px" prop="beLocated">
            <el-input v-model="reportCommonObj.charge" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="负责人" prop="principal">
            <el-select v-model="reportCommonObj.principal" style="width: 100%" clearable filterable>
              <el-option v-for="item in noPageReportUserList" :key="item.id" :value="item.id" :label="item.nickName" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="6">
          <el-form-item label="项目成员1" prop="member1">
            <el-select v-model="reportCommonObj.member1" style="width: 100%" placeholder="请选择" clearable filterable>
              <el-option v-for="item in noPageReportUserList" :key="item.id" :value="item.id" :label="item.nickName" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目占比1" prop="itemProportion1">
            <el-input v-model="reportCommonObj.itemProportion1" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目成员2" prop="member2">
            <el-select v-model="reportCommonObj.member2" style="width: 100%" placeholder="请选择" clearable filterable>
              <el-option v-for="item in noPageReportUserList" :key="item.id" :value="item.id" :label="item.nickName" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目占比2" prop="itemProportion2">
            <el-input v-model="reportCommonObj.itemProportion2" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="6">
          <el-form-item label="项目成员3" prop="member3">
            <el-select v-model="reportCommonObj.member3" style="width: 100%" placeholder="请选择" clearable filterable>
              <el-option v-for="item in noPageReportUserList" :key="item.id" :value="item.id" :label="item.nickName" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目占比3" prop="itemProportion3">
            <el-input v-model="reportCommonObj.itemProportion3" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form-item>
  </div>
</template>

<script>
import { noPageUser } from '@/api/user'
import { mapGetters } from 'vuex'
import { getSearchFormList } from '@/api/project-report'

export default {
  name: 'ReportInfo',
  props: {
    reportCommonObj: {
      reportName: '',
      type: Object,
      required: true
    },
    isAudit: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data() {
    return {
      projectType: [],
      achievement: [],
      noPageReportUserList: [],

      departments: [{
        value1: '数据信息部',
        label1: '数据信息部'
      }, {
        value1: '评估咨询部',
        label1: '评估咨询部'
      }, {
        value1: '总师室',
        label1: '总师室'
      }, {
        value1: '外地事业发展部',
        label1: '外地事业发展部'
      }, {
        value1: '行政部',
        label1: '行政部'
      }, {
        value1: '市场部',
        label1: '市场部'
      }, {
        value1: '资产评估事业部',
        label1: '资产评估事业部'
      }, {
        value1: '工程咨询部',
        label1: '工程咨询部'
      }, {
        value1: '总经理',
        label1: '总经理'
      }],
      value1: '',

      tranchess: [{
        value2: '数据业务组',
        label2: '数据业务组'
      }, {
        value2: '信息服务组',
        label2: '信息服务组'
      }, {
        value2: '评估组',
        label2: '评估组'
      }, {
        value2: '咨询组',
        label2: '咨询组'
      }, {
        value2: '市场一组',
        label2: '市场一组'
      }, {
        value2: '市场二组',
        label2: '市场二组'
      }],
      value2: ''
    }
  },

  created() {
    this.init()
  },
  computed: {
    ...mapGetters([
      'id'
    ])
  },
  methods: {
    init() {
      this.getNoPageList()
    },

    getNoPageList() {
      this.getNoPageUserList()
      this.getSearchForm()
    },
    getNoPageUserList() {
      noPageUser().then(res => {
        this.noPageReportUserList = res.data.users
        this.noPageSignature = this.noPageReportUserList.filter(item => item.id === '1514497650193797121' || item.id === '1502197606761553921' || item.id === '1502197806955683841' || item.id === '1502197899352006658' || item.id === '1508298718535143425' || item.id === '1508299505017475074' || item.id === '1508299594242904066' || item.id === '1508298870004043778' || item.id === '1508298960420655105' || item.id === '1508299055350337537' || item.id === '1508300308801310722')
      })
    },
    getSearchForm() {
      getSearchFormList().then(res => {
        this.projectType = res.data.projectType
        this.achievement = res.data.achievement
      })
    },
    selectUser(val) {
      var user1 = this.noPageReportUserList.filter(item => item.id === val)
      this.reportCommonObj.department = user1[0].department
      this.reportCommonObj.tranches = user1[0].tranches
    },
    resetUser(val) {
      this.reportCommonObj.department = null
      this.reportCommonObj.tranches = null
    },
    calculatePayHandler(val) {
      this.reportCommonObj.chargeGist = val
    }
  }
}
</script>

<style scoped>

</style>
